<template>
  <div class="container">
    <div class="EntryForm">
      <h2>报名表</h2>
      <br>
      <form>
        <p>您报名的课程为：{{ $route.params.id }}. {{ lectureList.lectureName }}</p><br>
        <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
        <input type="text" v-model="name" id="name" ><br><br>
        <div class="gender">
            <span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
          <input type="checkbox" id="gender" v-model="gender" value="false" class="gender"><!---value为true表示男性-->
          <label for="gender" class="gender">
            <span class="knob gender"><i></i></span>
          </label>
        </div><br>
        <span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：&nbsp;</span>
        <input type="text" v-model="email" id="email"><br><br>
        <span>公司名称：&nbsp;</span>
        <input type="text" v-model="companyName" id="companyName"><br><br>
        <span>工作岗位：&nbsp;</span>
        <input type="text" v-model="workPosition" id="workPosition"><br><br>
        <span>技术水平：&nbsp;</span>
        <input type="text" v-model="technicalLevel" id="technicalLevel"><br><br>
        <div class="Btn">
          <button  type="button" class="submitBtn btn" @click="handleAdd">提交报名表</button>
          <!-- <button class="returnBtn btn">返回主页</button> -->
          <router-link :to="'/student_Home'">
            <a class="returnBtn">返回主页</a>
          </router-link>
        </div>
      </form>
    </div>
  </div>
  </template>

  <script>
  import axios from 'axios'
  export default{
    data(){
      return{
        lectureName:"",
        lectureList:[
            {"id": 8,
                "createTime": "2023-12-05T01:27:22.277+00:00",
                "updateTime": "2023-12-05T01:27:22.277+00:00",
                "deleted": false,
                "lectureName": "java",
                "lectureContent": "G楼的第一堂课",
                "lectureTime": "2023-12-05",
                "lecturePlace": "G101",
                "teacherId": 1,
                "isNotificated": false,
                "trainningPlanId": 2}
            ],
        name:"",
        gender:"",
        email:"",
        companyName:"",
        workPosition:"",
        technicalLevel:"",

      }
    },
    created(){
      let id = this.$route.params.id;
      this.loadData(id);
      // this.handleAdd();
    },
    methods:{
      loadData(id){
        let that = this;
        //http://120.46.212.219:8081/lecture/detail?deleted=false&id=8
        axios.get('/api/lecture/detail',{
        params:{
          deleted:false,
          id:id,
        }
      })
      .then((response) =>{
        console.log(response);
        // this.lecturelist=response.data;
        console.log(response.data.data);
        that.lectureList=response.data.data;
        // console.log(lectureList);

      })
      .catch(function(error){
        console.log(error);
      })
      .finally(function(){
        //总是会执行
      })
      },
      handleAdd(){
        let that = this;
        if(this.gender==false){
          this.gender="女"
        }else if(this.gender==true){
          this.gender="男"
        }
        // let lcompanyName="";
        // let lemail="";
        // let lgender="";
        // let lisChecked="";
        // let llectureId="";
        // let llectureName="";
        // let lname="";
        // let ltechnicalLevel="";
        // let lworkPosition="";
        // console.log(this.gender);
        //   lcompanyName=that.companyName,
        //   lemail=that.email,
        //   lgender=that.gender,
        //   lisChecked=false,
        //   llectureId=that.lectureList.id,
        //   llectureName=that.lectureName,
        //   lname=that.name,
        //   ltechnicalLevel=that.technicalLevel,
        //   lworkPosition=that.workPosition,
        //   console.log(lcompanyName,lemail,lgender,lisChecked,llectureId,llectureName,lname,ltechnicalLevel,lworkPosition)
        axios
        .post('/api/registrationForm/add',{
          companyName:that.companyName,
          email:that.email,
          gender:that.gender,
          isChecked:false,
          isObtainedMaterial: true,//
          isPay: true,//
          id: 5,//
          lectureId:that.lectureList.id,
          lectureName:that.lectureName,
          name:that.name,
          studentId:that.lectureList.id,
          technicalLevel:that.technicalLevel,
          workPosition:that.workPosition,
        })
        .then(res =>{
          if(res.status==200){
            alert('添加成功')
            console.log(res)
            this.$router.push('/student_Home')
          }
        })
        .catch(err => {
          alert('添加失败')
          console.log(err.message)
        })
      }
      // getLectureNameById(id){//通过课程id查找课程名
      //   switch(id){
      //     case "1": this.lectureName="html与css基础";break;
      //     case "2": this.lectureName="计算机图形学";break;
      //     case "3": this.lectureName="计算机网络";break;
      //     case "4": this.lectureName="编译原理";break;
      //   }

      // }
    }
  }

  
</script>

<style lang="css" scoped>
* {
  box-sizing: border-box;
}



body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

label {
  cursor: pointer;
  display: inline-block;
  width: 80px;
  height: 41px;
  box-shadow: 0 0 0 4px #efeeee inset;
  border-radius: 30px;
  position: relative;
}

input{
  border-radius: 10px;
  border: solid 1px;
  border-color: #bbb6b6;
  height: 35px;
  font-size: 15px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* input :active{
  background-color: rgba(255, 255, 255, 0.3);
} */

.gender input{
  display: none;
}

.gender{
  height: 23px;
}

/* input{
  display: none;
} */



.knob {
  position: absolute;
  width: 21px;
  top: 0;
  left: 0;
  height: 21px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #f470a7 inset;
  background-color: #fbd4e6;
  transition: 0.3s;
}

.knob > i {
  position: absolute;
  width: 4px;
  height: 9px;
  top: 100%;
  background-color: #f470a7;
  left: calc(50% - 4px);
}

.knob > i:before,
.knob > i:after {
  width: 6px;
  position: absolute;
  top: 42%;
  content: "";
  height: 2px;
  background-color: #f470a7;
}

.knob > i:before {
  left: 4px;
}
.knob > i:after {
  left: -6px;
}

input:checked + label > .knob {
  box-shadow: 0 0 0 4px #a1c6dd inset;
  background-color: #e2ecf4;
  transform: translateX(59px) rotate(-140deg);
}

input:checked + label > .knob > i {
  background-color: #a1c6dd;
}

input:checked + label > .knob > i:after,
input:checked + label > .knob > i:before {
  background-color: #a1c6dd;
}

input:checked + label > .knob > i:after {
  top: 15px;
  width: 12px;
  left: -7px;
  transform: rotate(45deg);
}
input:checked + label > .knob > i:before {
  top: 13px;
  width: 12px;
  left: 0px;
  transform: rotate(134deg);
}

.container{
  position: absolute;
  top: 0;
  /* left: 0; */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  background: url('../assets/image/5b5bb3f14863b.jpg');
  background-size: cover;
}

.EntryForm{
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  text-align: justify;
  margin: 0;
  padding: 10px 40px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  
  /* width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  background: url('../assets/image/5b5bb3f14863b.jpg');
  background-size: cover; */
}

router-link :active{
  text-decoration: none;
}

.Btn{
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}

.Btn button{
  border-color: transparent;
  background-color: #bac34e;
  color: #fff;
  border-radius: 8px;
  font-size: 20px;
}

.Btn button:hover{
  border-color: transparent;
  background-color: #222222;
  color: #fff;
  cursor: pointer;
}

.Btn a{
  text-decoration: none;
  /* width: 100px;
  height: 50px; */
  border: solid;
  transition: 0.5 linear;
  overflow: hidden;
  border-color: transparent;
  background-color: #bac34e;
  color: #fff;
  font-size: 20px;
  padding: 5px;
  border-radius: 8px;
}

.EntryForm input{
  outline: none;
}

.Btn a:hover{
  border-color: transparent;
  background-color: #222222;
  color: #fff;
}

</style>